
<template>
  <div class="product-list-page">
    <h1>产品列表</h1>
    
    <PaginatedGrid
      :items="products"
      :min-item-width="200"
      :gap="16"
      :container-padding="24"
      :rows-per-page="3"
      @page-change="handlePageChange"
      @page-size-change="handlePageSizeChange"
    >
      <template #item="{ item, itemsPerRow, containerWidth }">
        <ProductCard 
          :product="item"
          :items-per-row="itemsPerRow"
          :container-width="containerWidth"
        />
      </template>
    </PaginatedGrid>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import PaginatedGrid from './components/PaginatedGrid.vue'
import ProductCard from './components/ProductCard.vue'

interface Product {
  id: number
  name: string
  price: number
  image: string
}

const products = ref<Product[]>([])

// 模拟API调用
const fetchProducts = async () => {
  // 这里实际调用接口时，可以使用计算出的pageSize
  // const response = await api.getProducts({ page, pageSize })
  
  // 模拟数据
  products.value = Array.from({ length: 50 }, (_, i) => ({
    id: i + 1,
    name: `产品 ${i + 1}`,
    price: Math.random() * 1000,
    image: `https://picsum.photos/200/200?random=${i}`
  }))
}

const handlePageChange = (page: number, pageSize: number) => {
  console.log('页面变化:', page, '每页数量:', pageSize)
  // 这里可以调用API获取对应页面的数据
}

const handlePageSizeChange = (pageSize: number) => {
  console.log('每页数量变化:', pageSize)
  // 当窗口大小改变导致每行元素数量变化时，可以重新调用API
}

onMounted(() => {
  fetchProducts()
})
</script>